<template>
  <div class="container">
    <el-form class="form" size="large" :model="adminForm">
      <div class="title-container">
        <h3>校园后勤服务后台</h3>
      </div>
      <el-form-item>
        <el-input :prefix-icon="User" type="text" v-model="adminForm.adminName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input :prefix-icon="Lock" type="password" v-model="adminForm.adminPassword"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <div class="codeImg">
        <el-input class="input" v-model="codeImgNumber" type="text" placeholder="验证码"></el-input>
        <img @click="refreshCodeImg" :src="codeImgUrl" alt="验证码"/>
      </div>
      <el-form-item label="记住我">
        <el-switch v-model="adminForm.rememberMe"/>
      </el-form-item>
      <!--由于el-button是放在表单里，默认是会实现表单的跳转，需要用@click.native.prevent阻止-->
      <el-button class="button" type="primary"
                 @click.native.prevent="handleLogin">登录
      </el-button>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {useRouter} from "vue-router"
import sysAxios from "@/api/sys.js"
import {useDataStore} from "@/stores/dataStore.js"
import {Lock, User} from '@element-plus/icons-vue'

const dataStore = useDataStore()
const router = useRouter()

/**
 * 登录
 */
//用户表单
const adminForm = reactive({
  adminName: '',
  adminPassword: '',
  rememberMe:false,
})
const handleLogin = () => {
  if ((codeImgNumber.value == "0413" && codeImgUrl.value == codeImgList[0].url) || (codeImgNumber.value == "5374" && codeImgUrl.value == codeImgList[1].url)) {
    if (adminForm.adminName.length >= 1 || adminForm.adminPassword.length >= 1) {
      http_login(adminForm.adminName, adminForm.adminPassword)
    } else {
      ElMessage.error('账号密码不能为空')
    }
  } else {
    ElMessage.error('验证码错误')
  }
}
const http_login = (username, password) => {
  sysAxios.sys_login({
    username: username,
    password: password,
    "remember-me": true
  }).then(res => {
    if (res.data.code === 200) {
      dataStore.adminName = res.data.data.username;
      sysAxios.admin_findByAdminName({
        adminName: res.data.data.username
      }).then(res => {
        dataStore.adminId = res.data.data.adminId
        dataStore.adminImg = res.data.data.adminImg
      })
      dataStore.islogin = true
      router.push("/sys/admin")
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 验证码生成
 */
// 验证码
const codeImgNumber = ref('');
// 验证码图片
const codeImgUrl = ref('');
onMounted(() => {
  codeImgUrl.value = codeImgList[0].url
})
// 刷新验证码图片
const refreshCodeImg = () => {
  ElMessage.success("刷新验证码成功")
  if (codeImgUrl.value == codeImgList[0].url) {
    codeImgUrl.value = codeImgList[1].url
  } else {
    codeImgUrl.value = codeImgList[0].url
  }
};
const codeImgList = reactive([
  {
    name: '1',
    url: "https://img1.baidu.com/it/u=1070984255,945844267&fm=253&fmt=auto&app=138&f=PNG?w=491&h=236",
    value: '0413'
  },
  {
    name: '2',
    url: "https://bpic.588ku.com/element_origin_min_pic/01/37/32/26573c46f211bc8.jpg",
    value: '5374'
  },
])
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 800px;
  background-image: linear-gradient(120deg, #00e4d0, #5983e8) !important;

  .form {
    position: relative;
    width: 400px;
    padding: 160px 35px 0;
    margin: 0 auto;

    .title-container {
      font-size: 30px;
      color: #fff;
      text-align: center;
      margin: 20px;
    }


    .button {
      width: 100%;
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }
}

.codeImg {
  display: flex;

  .input {

  }

  img {
    cursor: pointer;
    width: 120px;
    height: 40px;
  }
}

</style>
